<template>
  <div class="dashboard-container-content-center-part1">
    <div class="dashboard-container-content-center-part1-title">
      <div class="dashboard-container-content-center-part1-title-text">
        <div class="dashboard-container-content-center-part1-title-text-item">
          <div
            class="dashboard-container-content-center-part1-title-text-item-text"
          >
            {{accountCount}}
          </div>
          <div
            class="dashboard-container-content-center-part1-title-text-item-value"
          >
            账号总数(个)
          </div>
        </div>
        <div class="dashboard-container-content-center-part1-title-text-item">
          <div
            class="dashboard-container-content-center-part1-title-text-item-text"
          >
            {{systemCount}}
          </div>
          <div
            class="dashboard-container-content-center-part1-title-text-item-value"
          >
            数据系统总数(套)
          </div>
        </div>
        <div class="dashboard-container-content-center-part1-title-text-item">
          <div
            class="dashboard-container-content-center-part1-title-text-item-text"
          >
            {{vaultApplyCount}}
          </div>
          <div
            class="dashboard-container-content-center-part1-title-text-item-value"
          >
            金库申请(条)
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-container-content-center-part1-content">
      <div class="scroll-wrapper">
        <div class="scroll-content">
          <div>
            当前，数字经济高速发展，数据已成为国家基础性战略资源和核心生产要素，也是集团公司网信安领域重点工作。随着《数据安全法》《个人信息保护法》等法规的出台，数据安全已成为运营商网信安领域建设的核心任务。然而，传统数据安全管理模式面临多重挑战：数据规模指数级增长导致人工管理效率低下；敏感信息识别依赖规则库，难以应对复杂场景；账号权限与金库审批校验滞后于动态业务需求；同时，人工智能技术的深度应用也带来了新型数据安全风险，亟需技术手段与管理模式的创新突破。
          </div>
          <div>
            在此背景下，"虎鲸·智数"智能数据安全集中化管理工具应运而生。项目团队基于对行业痛点的深刻洞察，自主研发融合深度学习算法与大数据分析技术的AI驱动平台。通过构建智能化数据治理引擎，实现账号权限、金库审批的实时合规性校验，显著提升数据安全日常管理的自动化与精准度。该工具通过AI技术与网络安全的深度融合，推动数据安全管理从"人防"向"技防+智防"的跃迁，为各省公司数字化转型中的数安治理提供标准化、智能化的解决方案，助力构建全域数据安全防护体系。
          </div>
          <div>
            基于AI大数据模型的数据安全集中化管理工具，深度融合深度学习算法与大数据分析技术，通过自研算法，实现：账号权限合规性校验、金库审批合规性校验等功能，实践AI+技术与网络安全的深度融合，赋能AI+在网络安全生产中应用，促进管理维护人员向数智化的转变。“虎鲸·智数”智能数据安全集中化管理工具，为纯自研项目，为数据安全管理人员提供支撑，大幅度提升日常工作效率，可推广至全国各省数安专业人员使用。
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-container-content-center-part1-more">查看更多</div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';

  export default {
  name: "ContentCenterPart1",
  data() {
    return {
      isScrolling: true,
      systemCount: 0,
      accountCount: 0,
      // logCount: 0,
      vaultApplyCount: 0,
    };
  },
  computed: {
    ...mapGetters([
      'generalList',
      'importantCriticalList',
      'accountPermissionList',
      // 'logAuditList'
      'vaultApplyList'
    ])
  },
  watch: {
    generalList: {
      handler() {
        this.initData();
      },
      deep: true
    },
    importantCriticalList: {
      handler() {
        this.initData();
      },
      deep: true
    },
    accountPermissionList: {
      handler() {
        this.initData();
      },
      deep: true
    },
    // logAuditList: {
    //   handler() {
    //     this.initData();
    //   },
    //   deep: true
    // },
    vaultApplyList: {
      handler() {
        this.initData();
      },
      deep: true
    },
  },
  mounted() {
    this.initData();
    this.startScrolling();
  },
  beforeDestroy() {
    this.stopScrolling();
  },
  methods: {
    initData() {
      this.accountCount = this.accountPermissionList.length;
      // this.logCount = this.logAuditList.length;
      this.vaultApplyCount = this.vaultApplyList.length;
      const systemSet = new Set();
      this.generalList.forEach(e => { systemSet.add(e.k2) });
      this.systemCount = systemSet.size + this.importantCriticalList.length;
    },
    // async initData() {
    //   const generalList = await this.$store.dispatch('general/getList');
    //   const importantCriticalList = await this.$store.dispatch('importantCritical/getList');
    //   const accountPermissionList = await this.$store.dispatch('accountPermission/getList');
    //   const logAuditList = await this.$store.dispatch('logAudit/getList');
    //   this.accountCount = accountPermissionList.length;
    //   this.logCount = logAuditList.length;
    //   const systemSet = new Set();
    //   generalList.forEach(e => { systemSet.add(e.k2) });
    //   this.systemCount = systemSet.size + importantCriticalList.length;
    // },
    startScrolling() {
      const content = this.$el.querySelector(".scroll-wrapper");
      if (content) {
        content.classList.add("scrolling");
      }
    },
    stopScrolling() {
      const content = this.$el.querySelector(".scroll-wrapper");
      if (content) {
        content.classList.remove("scrolling");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dashboard-container-content-center-part1 {
  width: 776px;
  height: 555px;
  background: url("../../../assets/images/box03@1x.png") no-repeat center center;
  background-size: 100% 100%;
  position: relative;
  padding: 84px 66px;
  &-title {
    width: 543px;
    height: 131px;
    background: url("../../../assets/images/box02@1x.png") no-repeat center
      center;
    background-size: 100% 100%;
    margin: 0 auto;
    position: absolute;
    //顶部居中展示
    top: -65.5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    //内容居中展示
    display: flex;
    justify-content: space-around;
    align-items: center;
    &-text {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        &-text {
          font-family: DIN Condensed;
          font-weight: bold;
          font-size: 54px;
          line-height: normal;
          letter-spacing: 0px;
          text-align: left;
          background: linear-gradient(0deg, #9099a7 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        &-value {
          color: #61fff7;
          font-family: FZZongYi-M05S;
          font-weight: regular;
          font-size: 16px;
          line-height: 12px;
          letter-spacing: 0px;
          text-align: left;
        }
      }
    }
  }
  &-content {
    text-indent: 2em;
    color: #dcf6ff;
    font-family: MiSans;
    font-weight: medium;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: justified;
    max-height: 440px;
    overflow: hidden;
    position: relative;

    .scroll-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      animation: scrollContent 30s linear infinite;

      &:hover {
        animation-play-state: paused;
      }
    }

    .scroll-content {
      width: 100%;
      position: relative;
    }

    @keyframes scrollContent {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-50%);
      }
    }

    // Hide scrollbar for Chrome, Safari and Opera
    &::-webkit-scrollbar {
      display: none;
    }

    // Hide scrollbar for IE, Edge and Firefox
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  &-more {
    width: 100px;
    height: 32px;
    border-radius: 8px;
    background: #486eb5;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-family: Lato;
    font-weight: SemiBold;
    font-size: 13px;
    float: right;
    margin-top: 10px;
    cursor: pointer;
  }
}
</style>
